import React, { useEffect, useState } from 'react'
import http from './api/api'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
function App() {

  let [time, setTime] = useState(60)
  let [status, setStatus] = useState(false)
  let [code, setCode] = useState()

  const btn = async () => {

    // let tt = await setInterval(() => {
    //   if (setTime < 1) {
    setCode(Math.random().toString().slice(2, 6))
    // clearInterval(tt)
    // return 60
    //   }
    //   return setTime - 1
    // }, 1000)
  }
  useEffect(() => {
    btn()
  }, [])
  return (
    <div>
      <Form
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Header>水平布局表单</Form.Header>
        <Form.Item
          name='username'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
        <Form.Item
          label='验证码'
          rules={[{ required: true, message: '验证码不能为空' }]}
        >
          <Input placeholder='请输入验证码' value={code} />

        </Form.Item>
        <Form.Item>
          <Button onClick={() => btn()}>
            {`${time}秒后获取验证码`}
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default App
